<template>
  <div :style="containerStyle" :class="className">
    <div :style="starContainerStyle">
      <!-- {Array.from({ length: maxRating }, (_, i) => ( <Start key={i} onRate={()
      => handleSetRating(i + 1)} onHoverIn={() => setTempRating(i + 1)}
      onHoverOut={() => setTempRating(0)} color={color} size={size}
      full={tempRating ? tempRating >= i + 1 : rating >= i + 1} /> ))} -->

      <Star
        v-for="(_, idx) in new Array(maxRating)"
        :key="idx"
        :onRate="() => handleSetRating(idx + 1)"
        :onHoverIn="() => (this.tempRating = idx + 1)"
        :onHoverOut="() => (this.tempRating = 0)"
        :color="color"
        :size="size"
      />
    </div>
    <p :style="textStyle">
      {{
        messages.length === maxRating
          ? messages[tempRating ? tempRating - 1 : rating - 1]
          : tempRating || rating || ""
      }}
    </p>
  </div>
</template>

<script>
import Star from "./Star.vue";

export default {
  props: [
    {
      maxRating: {
        default: 5,
      },
      color: {
        default: "#fcc419",
      },
      size: {
        default: 48,
      },
      className: {
        default: "",
      },
      messages: {
        default: [],
      },
      defaultRating: {
        default: 0,
      },
      onSetRating: {
        default: () => {},
      },
    },
  ],
  data() {
    return {
      rating: props.defaultRating,
      tempRating: 0,
      containerStyle: {
        display: "flex",
        alignItems: "center",
        gap: "16px",
      },
      starContainerStyle: {
        display: "flex",
      },
    };
  },

  methods: {
    handleSetRating(newRating) {
      this.rating = newRating;
      props.onSetRating(newRating);
    },
  },

  computed: {
    textStyle() {
      return {
        lineHeight: "1",
        margin: "0",
        color: props.color,
        fontSize: `${props.size / 1.5}px`,
      };
    },
  },
};
</script>
